<script setup lang='ts' name="protocol-management">
import { useGetBuyerOrderPage, useGetBuyerOrderStatistics } from '@fl/api/purchase'
import { SearchForm } from '@fl/components'
import ButtonItem from '@fl/components/button-item.vue'
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import AcceptanceInfo from './acceptance-info.vue'
import ApprovalAcceptance from './approval-acceptance.vue'
import { useForm } from './hooks/use-form'
import ListItem from './list.vue'
import SendGoods from './send-goods.vue'

const router = useRouter()
const { form, reset, schema } = useForm()

const tabs = ref<any>([])
const active = ref()

const pageInfo = ref<any>({
    page: 1,
    size: 10,
    total: 0,
})

const searchParams = computed(() => {
    return {
        agreementName: form.value.agreementName,
        orderName: form.value.orderName,
        orderNo: form.value.orderNo,
        orderStatus: unref(active),
        orderTimeEnd: form.value.selectTime?.[1] ?? '',
        orderTimeStart: form.value.selectTime?.[0] ?? '',
        page: pageInfo.value.page,
        partyB: form.value.partyB,
        queryType: 1, // 查询类型 1 查询订单列表 0 查询删除列表
        size: pageInfo.value.size,
    }
})
const { data, isLoading } = useGetBuyerOrderPage(searchParams)

const statisticsParams = computed(() => {
    return {
        agreementName: form.value.agreementName,
        orderName: form.value.orderName,
        orderNo: form.value.orderNo,
        orderTimeEnd: form.value.selectTime?.[1] ?? '',
        orderTimeStart: form.value.selectTime?.[0] ?? '',
        partyB: form.value.partyB,
    }
})

const { data: statisticData, isLoading: statisticLoading } = useGetBuyerOrderStatistics(statisticsParams)

const loading = computed(() => statisticLoading.value || isLoading.value)
const orderList = ref([])
const toolBtn: any = [
    // {
    //     icon: CircleCheckFilled,
    //     label: '全选',
    //     type: 'default',
    //     value: 'all',
    // },
    // {
    //     icon: CirclePlus,
    //     label: '新增订单',
    //     type: 'primary',
    //     value: 'add',
    // },
    // {
    //     icon: Download,
    //     label: '导出订单',
    //     type: 'primary',
    //     value: 'download',
    // },
    // {
    //     icon: Upload,
    //     label: '导入订单',
    //     type: 'primary',
    //     value: 'upload',
    // },
]

const sendRef = ref()
const approvalRef = ref()
const infoRef = ref()

const detail = ref<any>({})

const show = ref(false)
const showApproval = ref(false)
const showInfo = ref(false)

function change(val: any) {
    console.log(123, active.value)
    console.log(33, val)
}

function doAction(item: any, row: any) {
    console.log('doAction', item.value)
    switch (item.value) {
        case 'send':
            console.log('立即发货', row)
            show.value = true
            break
        case 'edit':
            console.log('修改订单', row)
            router.push('/purchase-pages/purchase-order-management/edit-order')
            break
        case 'view':
            console.log('查看并接单', row)
            router.push('/purchase-pages/purchase-order-management/purchase-sales-order-view')
            break
        case 'log':
            router.push('/purchase-pages/purchase-order-management/purchase-sales-order-log')
            break
        case 'approval':
            console.log('申请验收', row)
            showApproval.value = true
            break
        case 'detail':
            showInfo.value = true
            console.log('申请验收单明细', row)
            break
        default:
            break
    }
}
function searchList(val: any) {
    form.value = {
        ...val,
    }
    console.log(searchParams.value)
}
function pageChange(val: any) {
    console.log(val)
    pageInfo.value = Object.assign(pageInfo.value, val)
}
watchEffect(() => {
    if (data.value) {
        orderList.value = cloneDeep(data.value.records)
        orderList.value.forEach((item: any) => {
            item.expand = true
        })
        console.log(orderList.value)
        pageInfo.value.total = data.value.total
    }
})

watchEffect(() => {
    if (statisticData.value) {
        // console.log(statisticData.value)
        tabs.value = cloneDeep(statisticData.value).sort((a, b) => a.orderStatus - b.orderStatus)
        tabs.value.unshift({
            count: 0,
            orderStatus: '',
            statusName: '全部',
        })
        active.value = tabs.value[0].orderStatus
    }
})
</script>s

<template>
    <ElCard mb-20
            class="top-32"
    >
        <SearchForm v-bind="form"
                    :columns="schema"
                    submit-text="查询"
                    @submit="searchList"
                    @reset="reset"
        />
    </ElCard>

    <ElCard mb-20>
        <el-tabs v-model="active"
                 @tab-change="change"
        >
            <el-tab-pane v-for="item in tabs"
                         :key="item.orderStatus"
                         :name="item.orderStatus"
                         :label="item.statusName"
            >
                <template #label>
                    <el-badge v-if="item.count"
                              :value="item.count"
                              :max="99"
                              :min="1"
                    >
                        {{ item.statusName }}
                    </el-badge>

                    <span v-else>{{ item.statusName }}</span>
                </template>
            </el-tab-pane>
        </el-tabs>

        <div class="tool_btn">
            <ButtonItem v-if="orderList?.length"
                        :btns="toolBtn"
                        @btn-click="doAction($event, 'item')"
            />
        </div>

        <ListItem :data="orderList"
                  :total="pageInfo.total"
                  :loading="loading"
                  @do-action="doAction"
                  @page-change="pageChange"
        />
    </ElCard>

    <SendGoods ref="sendRef"
               v-model="show"
               :data="detail"
               :loading="isLoading"
    />

    <ApprovalAcceptance ref="approvalRef"
                        v-model="showApproval"
                        :data="detail"
    />

    <AcceptanceInfo ref="infoRef"
                    v-model="showInfo"
                    :data="detail"
    />
</template>

<style lang="less" scoped>
.tool_btn {
    margin-bottom: 20px;
}

.top-32 {
    margin-top: -32px;
}

:deep(.el-badge__content) {
    background: #da0004;
    transform: translateY(-50%) translateX(135%);
}
</style>
